<template>
  <div v-loading="loading" class="friend-links-container">
    <h1>友情链接</h1>
    <div class="content">
      <div class="link-list">
        <div v-for="link in linkList" :key="link.name" class="link-item">
          <a :href="link.address" target="_blank" rel="noopener noreferrer">
            <img :src="link.logo" :alt="link.name" class="logo" />
            <div class="info">
              <h3>{{ link.name }}</h3>
              <p>{{ link.description }}</p>
            </div>
          </a>
        </div>
      </div>
    </div>
    <sg-comment type="1" :commentList="commentList"/>
  </div>
</template>

<script lang="ts" setup>
import LinkApi, { LinkVo } from '@/api/link'
import SgComment from '@/views/components/SgComment/index.vue'
import CommentApi, { CommentVo } from '@/api/comment'

defineOptions({
  name: 'FriendLinksPage',
})

const linkList = ref<LinkVo[]>()
const commentList = ref<CommentVo[]>()
const loading = ref(false)

onMounted(() => {
  initData()
})

async function initData() {
  try {
    loading.value = true
    await toGetLinkList()
    await toGetComments()
  } catch (e) {
    console.log(e)
  } finally {
    loading.value = false
  }
}

async  function  toGetLinkList(){
  const res = await LinkApi.getLinkList()
  if (res.success) {
    linkList.value = res.items ?? []
  }
}

async function toGetComments(){
  const res = await  CommentApi.getLinkCommentList({
    pageNum: 1,
    pageSize: 10
  })
  if(res.success){
    commentList.value = res.item.rows
  }
}
</script>

<style scoped>
.friend-links-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
}

.content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.link-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.link-item {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 15px;
  transition: all 0.3s ease;
}

.link-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.link-item a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.logo {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  margin-right: 20px;
}

.info h3 {
  margin: 0 0 5px;
  color: #333;
}

.info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}
</style>
